<template>
  <div class="xuan">
    <div class="left">
        <div @click="handlist(index)" v-for="(item,index) in list2" :key="index" :class="{active:xiabiao2==index}">{{item.text}}</div>
    </div>
    <div class="right">
        <div class="zi">热销</div>
        <div class="ran" v-for="(ite,inde) in list3" :key="inde">
            <div class="dig"><img :src="ite.pic" alt=""></div>
            <div class="nei">
                <div class="h1">{{ite.text}}</div>
                <div class="h2">{{ite.decs}}</div>
                <div class="h3">
                    <span class="sp1">¥{{ite.jia}}</span>
                    <span class="sp">+</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import tu1 from '../assets/day04---vuejs作业_03.gif'
import tu2 from '../assets/day04---vuejs作业_06.gif'
import tu3 from '../assets/day04---vuejs作业_08.gif'
import tu4 from '../assets/day04---vuejs作业_10.gif'

export default {
data(){
    return{
        list2:[
            {id:1,text:'热销'},
            {id:2,text:'优惠'},
            {id:3,text:'三文鱼'},
            {id:4,text:'刺身'},
            {id:5,text:'年货礼品区'},
            {id:6,text:'野生大对虾'},
            {id:7,text:'冻货区'},
            {id:8,text:'贝壳螺类'},
            {id:9,text:'鲜虾活鱼'},
        ],
        list3:[
            {id:1,pic:tu1,text:'却威三文鱼刺身~薄片',decs:'国千三文骨中段。口M导题,富含.月售的0研姆存率1心OP',jia:45},
            {id:2,pic:tu2,text:'国产生蚝-剌身',decs:'每赀一民广东阁江生蠕。个大向职,日售的研好存率C05',jia:8},
            {id:3,pic:tu3,text:'却威纯鲜三文鱼-厚片',decs:'百好之百当天空迥白送。面钧晋皮导.月营3份好评率100R6',jia:54.5},
            {id:4,pic:tu4,text:'北极甜虾',decs:'每份30只',jia:45}
        ],
        xiabiao2:0
    }
},
methods:{
    handlist(index){
        this.xiabiao2=index
    }
}
}
</script>

<style scoped>
.xuan{
    display: flex;
    padding: 0 20px;
}
.left{
    width: 90px;
    text-align: center;
}
.active{
    background-color: #eee;
    color: red;
}
.left div{
    height: 60px;
    line-height: 60px;
}
.zi{
    font-size:20px ;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}
.right{
    flex: 1;
}
.ran{
    display: flex;
    height: 100px;
    margin: 20px 0;
}
.h1{
    font-weight: bold;
}
.h2{
    font-size: 12px;
    color: rgb(116, 112, 112);
    margin: 10px 0;
}
.nei{
    flex: 1;
}
.dig{
width: 100px;
height: 100px;
}
img{
 width: 100%;
}
.sp{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    background-color: blue;
    font-size: 20px;
    font-weight: bold;
    color: white;
    float: right;
}
.sp1{
    float: left;
    color: red;
}
</style>